<template>
    <div>
        <el-row style="margin-top: 10px;">
            <el-col :span="12">
                <el-button type="primary" class="btn-size" @click="createdSecondLevel">创建导航栏</el-button>
                <el-button type="danger" class="btn-size" @click="removeSecondLevelAll">批量删除</el-button>
            </el-col>

            <el-col :span="12">
                <el-form :inline="true" class="demo-form-inline" :model="params">
                    <el-form-item label="导航栏名称">
                        <el-input v-model="params.search" placeholder="导航栏名称" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="second_level.data"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                align="center"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                align="center"
                width="150">
            </el-table-column>
            <el-table-column
                prop="weight"
                label="权重"
                align="center"
                width="150">
            </el-table-column>
            <el-table-column
                label="类型"
                align="center"
                width="150">
                <template slot-scope="scope">{{ scope.row.level===2?'二级标题':'无' }}</template>
            </el-table-column>

            <el-table-column
                label="url"
                align="center"
                width="250">
                <template slot-scope="scope">{{ (scope.row.url===null || scope.row.url==='')?'无': scope.row.url}}
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间"
                align="center"
                min-width="200">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="150"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="second_level.count"
            :page-size="params.page_size"
            :page-sizes="[10, 20, 30, 40, 100]"
            :current-page="params.page"
            layout="prev, pager, next, sizes"
            align="center">
        </el-pagination>
        <el-dialog :title="modalTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="父导航栏" prop="first_id" :label-width="formLabelWidth">
                    <el-select v-model="form.first_id" placeholder="请选择父导航栏">
                        <el-option
                            v-for="item in first_levels"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导航栏名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏类型" prop="type" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="请选择导航栏类型">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导航栏权重" prop="weight" :label-width="formLabelWidth">
                    <el-input v-model="form.weight" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏URL" prop="url" :label-width="formLabelWidth" v-if="form.type=='link'">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏URL" prop="url" :label-width="formLabelWidth" v-else>
                    <el-input v-model="form.url" autocomplete="off" disabled="disabled"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitSecondLevel">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="modalTitle" :visible.sync="dialogFormEdit">
            <el-form :model="form" ref="editForm">
                <el-form-item label="父导航栏" prop="first_id" :label-width="formLabelWidth">
                    <el-select v-model="form.first_id" placeholder="请选择父导航栏">
                        <el-option
                            v-for="item in first_levels"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导航栏名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏类型" prop="type" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="请选择导航栏类型">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导航栏权重" prop="weight" :label-width="formLabelWidth">
                    <el-input v-model="form.weight" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏URL" prop="url" :label-width="formLabelWidth" v-if="form.type == 'link'">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="导航栏URL" prop="url" :label-width="formLabelWidth" v-else>
                    <el-input v-model="form.url" autocomplete="off" disabled="disabled"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormEdit = false">取 消</el-button>
                <el-button type="primary" @click="submitSecondLevel">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getFirstLevel,
        getSecondLevel,
        addSecondLevel,
        updateSecondLevel,
        showSecondLevel,
        RemoveSecondLevel
    } from "../../../api/api";

    export default {
        name: "SecondLevel",
        data() {
            return {
                form: {
                    id: null,
                    first_id: null,
                    name: null,
                    type: "link",
                    weight: null,
                    url: null,
                    level: 2
                },
                params: {
                    page: 1,
                    page_size: 10,
                    search: ''
                },
                first_params: {
                    page_size: 1000,
                    search: ''
                },
                options: [{
                    value: 'button',
                    label: '按钮'
                }, {
                    value: 'link',
                    label: '链接'
                }],
                first_levels: [],
                modalTitle: "",
                formLabelWidth: '120px',
                second_level: [],
                skip_page: "",
                multipleSelection: [],
                dialogFormVisible: false,
                dialogFormEdit: false
            }
        },
        created() {
            this.getAllSecondLevel(this.params);
            this.getAllFirstLevel(this.first_params);
        },
        methods: {
            onSubmit: function () {
                this.getAllSecondLevel(this.params);
            },
            handleEdit: function (row) {
                this.modalTitle = "编辑二级标题";
                this.$nextTick(() => {
                    this.$refs['editForm'].resetFields();
                });
                this.dialogFormEdit = true;
                showSecondLevel(row.id).then((response) => {
                    this.form.id = response.data.id;
                    this.form.first_id = response.data.first_id;
                    this.form.name = response.data.name;
                    this.form.type = response.data.type;
                    this.form.weight = response.data.weight;
                    this.form.url = response.data.url;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleDelete: function (row) {
                let _this = this;
                this.$confirm(`是否删除标题栏"${row.name}"?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    RemoveSecondLevel(row.id).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getAllSecondLevel(this.params);
                    }).catch(function (error) {
                        _this.$message({
                            type: 'error',
                            message: error.detail
                        });
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getAllSecondLevel: function (params) {
                getSecondLevel(params).then((response) => {
                    this.second_level = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getAllFirstLevel: function (params) {
                getFirstLevel(params).then((response) => {
                    response.data.data.forEach((row) => {
                        let item = {};
                        item['value'] = row.id;
                        item['label'] = row.name;
                        this.first_levels.push(item);
                    });
                }).catch(function (error) {
                    console.log(error);
                });
            },
            createdSecondLevel: function () {
                this.modalTitle = "添加二级标题";
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                });
                this.dialogFormVisible = true;
                /*if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }*/

            },
            submitSecondLevel: function () {
                this.form.level = 2;
                console.log(this.form);
                if (this.form.id === null) {
                    this.dialogFormVisible = false;
                    addSecondLevel(this.form).then(() => {
                        this.$message({
                            message: '恭喜你，创建成功',
                            type: 'success'
                        });
                        this.getAllSecondLevel(this.params);
                    }).catch(function (error) {
                        console.log(error);
                    });
                } else {
                    this.dialogFormEdit = false;
                    updateSecondLevel(this.form).then(() => {
                        this.$message({
                            message: '恭喜你，更新成功',
                            type: 'success'
                        });
                        this.getAllSecondLevel(this.params);
                    }).catch(function (error) {
                        console.log(error);
                    });
                }

            },
            removeSecondLevelAll: function () {
                let _this = this;
                if (this.multipleSelection) {
                    let rows = this.multipleSelection;
                    let rowName = '';
                    rows.forEach((row, index, array) => {
                        if (index === array.length - 1) {
                            rowName += row.name;
                        } else {
                            rowName += row.name + ',';
                        }

                    });
                    this.$confirm(`是否删除标题栏"${rowName}"?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        rows.forEach((row, index, array) => {
                            if (index === array.length - 1) {
                                RemoveSecondLevel(row.id).then(res => {
                                    this.getAllSecondLevel(this.params);
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                }).catch(err => {
                                    this.getAllSecondLevel(this.params);
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '删除失败'
                                    });
                                });
                            } else {
                                RemoveSecondLevel(row.id).then(res => {

                                }).catch(err => {
                                    this.getAllSecondLevel(this.params);
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '删除失败'
                                    });
                                });
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.params.page_size = val;
                this.getAllSecondLevel(this.params);
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.getAllSecondLevel(this.params);
            }

        }
    }
</script>

<style>
    th {
        background: #F5F5F5;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    tr {
        border-bottom: 1px solid #e6e6e6;
    }

    .demo-form-inline .input-width input {
        width: 320px !important;
    }

</style>
